<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Float 动画效果</title>

	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			background: #000;
		}

		footer {
			position: fixed;
			bottom: 0;
			text-align: center;

			width: 100%;	
			height: 100px;
			background: #666;
		}


		@-webkit-keyframes float {
		  0% {
		    -webkit-transform: translateY(-10px);
		    -ms-transform: translateY(-10px);
		    transform: translateY(-10px); }

		  50% {
		    -webkit-transform: translateY(0);
		    -ms-transform: translateY(0);
		    transform: translateY(0); }

		  100% {
		    -webkit-transform: translateY(-10px);
		    -ms-transform: translateY(-10px);
		    transform: translateY(-10px); } }

		@-moz-keyframes float {
		  0% {
		    -webkit-transform: translateY(-10px);
		    -ms-transform: translateY(-10px);
		    transform: translateY(-10px); }

		  50% {
		    -webkit-transform: translateY(0);
		    -ms-transform: translateY(0);
		    transform: translateY(0); }

		  100% {
		    -webkit-transform: translateY(-10px);
		    -ms-transform: translateY(-10px);
		    transform: translateY(-10px); } }

		@-o-keyframes float {
		  0% {
		    -webkit-transform: translateY(-10px);
		    -ms-transform: translateY(-10px);
		    transform: translateY(-10px); }

		  50% {
		    -webkit-transform: translateY(0);
		    -ms-transform: translateY(0);
		    transform: translateY(0); }

		  100% {
		    -webkit-transform: translateY(-10px);
		    -ms-transform: translateY(-10px);
		    transform: translateY(-10px); } }

		@keyframes float {
		  0% {
		    -webkit-transform: translateY(-10px);
		    -ms-transform: translateY(-10px);
		    transform: translateY(-10px); }

		  50% {
		    -webkit-transform: translateY(0);
		    -ms-transform: translateY(0);
		    transform: translateY(0); }

		  100% {
		    -webkit-transform: translateY(-10px);
		    -ms-transform: translateY(-10px);
		    transform: translateY(-10px); } }


		.down-animation {
		    background: url(assets/arrow-down.png) no-repeat;
		    width: 100px;
		    height: 50px;
		    background-size: 60%;
		    background-position: 20px -8px;
		    -webkit-animation: float 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
		    animation: float 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
		    margin: 20px auto;
		}
	</style>
</head>
<body>
	<footer>
		<div class="down-animation"></div>
	</footer>
</body>
</html>